<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>pai</title>
    
    <link rel="stylesheet" href="./font/iconfont.css">
    <link rel="icon" href="./图片/底部/少数派logo .png">
    <link rel="stylesheet" href="pai.css">
</head>

<body>

    <!-- 头部 -->
    <header class="header">
            <!-- logo -->
            <div class="logo">
                <img src="./图片/底部/少数派logo .png" alt="" >少数派
            </div>

            <!-- 导航栏 -->
            <nav class="nav">
            <ul>
                <li >
                    <a href="#" class="iconfont">&#xeb89; Matrix</a>
                </li>


                <li >
                    <a href="#" class="iconfont">&#xead9; 付费栏目</a>
                </li>


                <li >
                    <a href="#" class="iconfont">&#xe870; 特别策划</a>
                    
                </li>

                
                <li >
                    <a href="#" class="iconfont">&#xe60b; Pi Store</a>
                    
                </li>

                <li >
                    <a href="#" class="iconfont">&#xe624; Tron 计划</a>
                </li>
            </ul>
        </nav>
        <!-- 工具栏 -->
         <ul class="tool">
            <li class="vip">会员</li>
            <a href="#" class="iconfont">&#xe6e4;</a>
            <li class="login">登录</li>
        </ul>
    </header>
    <!-- 轮播图 -->
    <section class="carouselImage">
        <div class="carousel">
            <img src="./图片/轮播图/carou1.jpeg" alt="">
        </div>
        <a href="#" class="left iconfont">&#xe601;</a>
        
        <a href="#" class="right iconfont"> &#xe602; </a>
        <ul class="indicators">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </section>

    <!-- 推荐内容 -->
    <section class="recommend">
        <div><img src="./图片/触碰放大/触碰放大（1）.jpg" alt=""></div>
        <div> <img src="./图片/触碰放大/触碰放大（2）.png" alt=""></div>
       <div> <img src="./图片/触碰放大/触碰放大（3）.jpg" alt=""></div>
       <div> <img src="./图片/触碰放大/触碰放大（4）.png" alt=""></div>
       
    </section>

    <!-- 主体内容 -->
     <section class="bodyArti">
        <div class="tab">
                <li><a href="#" >推荐</a></li>
                <li><a href="#" >最热</a></li>
                <li><a href="#" >应用推荐</a></li>
                <li><a href="#" >生活方式</a></li>
                <li><a href="#" >效率技巧</a></li>
                <li><a href="#" >播客</a></li>
                <li><a href="#" >视频</a></li>
        </div>

        <div class="contain">
            <article id="content">
                <div class="article">
                    <img src="./图片/tab图片.png" alt="">

                    <div>
                       <div class="content">[嗡嗡嗡]的季节又要来了，选驱蚊产品请先认准成分</div>
                        <div >
                            <div class="user">
                                <img src="./图片/底部/用户头像（1）.jpg" alt="">
                                <div >黄猫</div>
                                <div style="color:#948782;">1天前</div>
                            </div>
                            <div class="comment">
                                <div class="iconfont ">&#xe8b6; 174</div>
                                <div class="iconfont ">&#xe891; 75</div>
                            </div>
                        </div>
                    </div>    
                </div>  


                <div class="article">
                    <img src="./图片/tab图片.png" alt="">

                    <div>
                       <div class="content">[嗡嗡嗡]的季节又要来了，选驱蚊产品请先认准成分</div>
                        <div >
                            <div class="user">
                                <img src="./图片/底部/用户头像（1）.jpg" alt="">
                                <div >黄猫</div>
                                <div style="color:#948782;">1天前</div>
                            </div>
                            <div class="comment">
                                <div class="iconfont ">&#xe8b6; 174</div>
                                <div class="iconfont ">&#xe891; 75</div>
                            </div>
                        </div>
                    </div>    
                </div>  


                <div class="article">
                    <img src="./图片/tab图片.png" alt="">

                    <div>
                       <div class="content">[嗡嗡嗡]的季节又要来了，选驱蚊产品请先认准成分</div>
                        <div >
                            <div class="user">
                                <img src="./图片/底部/用户头像（1）.jpg" alt="">
                                <div >黄猫</div>
                                <div style="color:#948782;">1天前</div>
                            </div>
                            <div class="comment">
                                <div class="iconfont ">&#xe8b6; 174</div>
                                <div class="iconfont ">&#xe891; 75</div>
                            </div>
                        </div>
                    </div>    
                </div>  

                
            </article>

            

            <aside id="aside">
                <section class="asideImg" id="asideImg">
                    <img src="./图片/侧边栏/头/侧边栏1.png" alt="" >
                    <img src="./图片/侧边栏/头/侧边栏2.png" alt="" >
                    <img src="./图片/侧边栏/头/侧边栏3.jpg" alt="" >
                    <img src="./图片/侧边栏/头/侧边栏4.png" alt="" >
                </section>
            
            
                <section class="sec-middle" id="sec-middle">
                    <div class="sec-middle-img"><img src="./图片/侧边栏/中间/侧边栏logo.png" alt="" ></div>

                    <div class="asideSection">
                        <div class="asideSectionContent">
                            <div >有奖话题：聊聊[我与少数派]</div>
                            <img src="./图片/侧边栏/中间/侧边栏展示图（1）.jpg" alt="">
                        </div>
                        <div class="iconfont" >&#xe630;
                            <strong>讨论 VOL.075</strong>
                        </div>    
                    </div>
                    <div class="line"></div>
                    <div class="asideSection">
                        <div class="asideSectionContent">
                            <div >有奖话题：聊聊[我与少数派]</div>
                            <img src="./图片/侧边栏/中间/侧边栏展示图（2）.jpg" alt="">
                        </div>
                        <div class="iconfont" >&#xe630;
                            <strong>讨论 VOL.075</strong>
                        </div>    
                    </div>
                    <div class="line"></div>
                    
                    <div class="asideSection">
                        <div class="asideSectionContent">
                            <div >有奖话题：聊聊[我与少数派]</div>
                            <img src="./图片/侧边栏/中间/侧边栏展示图（3）.jpg" alt="">
                        </div>
                    <div class="iconfont" >&#xe630;
                        <strong>
                        讨论 VOL.075</strong></div>    
                    </div>
                     <div class="line"></div>
           
                    <div class="asideSection"><a href="#">查看更多></a></div>
                </section>
            
                <section class="asideFoot" id="asideFoot">
                    <div class="asideLogo">
                        <img src="./图片/侧边栏/底部/侧边栏奖牌.png" alt="" >
                        <div>Matrix精选</div>
                    </div>

                    <div class="asideSectionFoot">
                        <div>PodFind:获取新知的一种方式</div>
                        <div class="asideUser">
                            <img src="./图片/侧边栏/底部/用户头像.jpeg" alt="">
                            <div>PostMeridy</div>
                        </div>
                    </div>
                    <div class="line"></div>


                    <div class="asideSectionFoot">
                        <div>从Z Flip3开始的折叠屏初尝：很苦，很酷</div>
                        <div class="asideUser">
                            <img src="./图片/侧边栏/底部/用户头像.jpeg" alt="">
                            <div>PostMeridy</div>
                        </div>
                    </div>
                     <div class="line"></div>
                
                    <div class="asideSectionFoot">
                        <div>在停运之前，我保存下了港台服3DS eShop的所有游戏元数据，图片与视频</div>
                        <div class="asideUser">
                            <img src="./图片/侧边栏/底部/用户头像.jpeg" alt="">
                            <div>PostMeridy</div>
                        </div>
                    </div>
                     <div class="line"></div>
               
                    <div class="asideSection"><a href="#">查看更多></a></div>
            </section>

            <section class="asideExtraFoot" id="asideExtraFoot">
                     <!-- <div class="line"></div>                 -->
                <div class="asideExtraFoot-icon">
                   
                    <div class="iconfont circle">&#xe67a;</div>
                    <div class="iconfont circle">&#xe607;</div>
                    <div class="iconfont circle">&#xe633;</div>
                </div>
                <ul class="asideExtraFoot-help">
                    <li>关于我们</li>
                    <li>联系我们</li>
                    <li>用户协议</li>
                    <li>商务合作</li>
                    <li>客户端</li>
                </ul>
            </section>

            
        </aside>
        </div>
    </section>    
    
    <div class="backTool">
            <a href="#" class="iconfont pen" >&#xe600;</a>
            <a href="#" class="iconfont back">&#xeb0a;</a>
    </div>

    <!-- 底部 -->
    
    <!-- <footer>
        <div class="footLeft">
             <div class="logo">
                <img src="./图片/底部/少数派logo .png" alt="" >
                <div class="iconfont">&#xe67a;</div>
            <div class="iconfont">&#xe607;</div>
            <div class="iconfont">&#xe62f;</div>
            <div class="iconfont">&#xe633;</div>
            </div>

            
        </div>
        <div class="footRight">
            <ul>
                <li>下载APP</li>
                <li>联系我们</li>
                <li>商务合作</li>
                <li>成为作者</li>
                <li>关于我们</li>
                <li>用户协议</li>
                <li>常见问题</li>
            </ul>
            <p>2017开心网文网文[2009]157号 京ICP证080482号 京公网安备110000000003号 未成年人家长监护</p>
        </div>
     </footer>  -->

         <script src="pai.js"></script>

</body>
    
    

</html>